"use strict";
import * as React from 'react';
const { View, TouchableOpacity, ScrollView, KeyboardAvoidingView, StyleSheet, ImageBackground, Image, Animated, StatusBar } = require('react-native');
const { List, InputItem, DatePicker, Picker } = require('antd-mobile');
import { autoSize, commonStyles } from "../../assets/styles/common";
import { archiveStyles } from "../../assets/styles/archive";
import MyText from "../../component/MyText";
import MyIcon from "../../component/icon";
import WhiteSpace from "../../component/WhiteSpace";
import MyImagePicker from "../../component/MyImagePicker";
import Colors from "../../assets/styles/Colors";
const { connect } = require('react-redux');
let InputItemStyle = require('antd-mobile/lib/input-item/style/index');
const { Actions } = require("react-native-router-flux");
const newStyle = {};
(() => {
    for (const key in InputItemStyle) {
        if (Object.prototype.hasOwnProperty.call(InputItemStyle, key)) {
            newStyle[key] = Object.assign({}, StyleSheet.flatten(InputItemStyle[key]));
            if (key === 'input') {
                newStyle[key].height = autoSize(140);
            }
        }
    }
})();
class CreateArchivesPage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.pickerAvatarImage = () => {
            MyImagePicker.showImagePicker({ width: 100, height: 100, cropperCircleOverlay: true }, (response) => {
                this.setState({ avatar: response });
            });
        };
        this.pickerbgImage = () => {
            MyImagePicker.showImagePicker({ width: 200, height: 100 }, (response) => {
                this.setState({ bgImage: response });
            });
        };
        this.onSummit = () => {
            if (this.props.createdType === 'edit') {
                let payload = Object.assign({}, this.props.userInfo);
                if (this.state.avatar) {
                    payload['file'] = {
                        uri: this.state.avatar.path,
                        type: 'application/octet-stream',
                        name: this.state.avatar.path.split('/')[this.state.avatar.path.split('/').length - 1]
                    };
                }
                payload.introduce = this.state.introduce;
                payload.website = this.state.website;
                payload.duty = this.state.duty;
                payload.skill = this.state.skills.map((s) => ({ id: s.id }));
                payload.hobby = this.state.hobbies.map((h) => ({ id: h.id }));
                this.props.dispatch({
                    type: 'auth/upDataUserInfo',
                    payload
                });
            }
            if (this.props.createdType === 'new') {
                let payload = Object.assign({}, this.props.userInfo);
                if (this.state.avatar) {
                    payload['file'] = {
                        uri: this.state.avatar.path,
                        type: 'application/octet-stream',
                        name: this.state.avatar.path.split('/')[this.state.avatar.path.split('/').length - 1]
                    };
                }
                payload.introduce = this.state.introduce;
                payload.website = this.state.website;
                payload.duty = this.state.duty;
                payload.skill = this.state.skills.map((s) => ({ id: s.id }));
                payload.hobby = this.state.hobbies.map((h) => ({ id: h.id }));
                this.props.dispatch({
                    type: 'auth/upDataUserInfo',
                    payload
                });
            }
        };
        this.renderListHeader = () => {
            const { avatar, bgImage } = this.state;
            if (bgImage) {
                return (<ImageBackground style={archiveStyles.headerView} source={{ uri: bgImage.path }}>
                    <TouchableOpacity onPress={this.pickerbgImage}>
                        <MyIcon name='icon-addpicture' size={30} color='#E0E0E0' style={{ marginRight: 20 }}/>
                    </TouchableOpacity>

                    <TouchableOpacity style={archiveStyles.avatarContainer} activeOpacity={1} onPress={this.pickerAvatarImage}>
                        <View style={archiveStyles.avatar}>
                            {avatar ? <Image source={{ uri: avatar.path }} style={archiveStyles.avatarImage}/> :
                    <View style={[commonStyles.flex1, commonStyles.centerVH]}>
                                    <MyIcon name='icon-addpicture' size={30} color='#C3C2C2'/>
                                    <MyText style={{
                        backgroundColor: 'transparent',
                        marginTop: 5,
                        color: '#666666',
                        fontSize: 14
                    }}>添加档案图片</MyText>
                                </View>}

                        </View>
                    </TouchableOpacity>
                    <View style={archiveStyles.headerBottom}/>
                </ImageBackground>);
            }
            else {
                return (<View style={archiveStyles.headerView}>
                    <TouchableOpacity onPress={this.pickerbgImage}>
                        <MyIcon name='icon-addpicture' size={30} color='#E0E0E0' style={{ marginRight: 20 }}/>
                    </TouchableOpacity>

                    <TouchableOpacity style={archiveStyles.avatarContainer} activeOpacity={1} onPress={this.pickerAvatarImage}>
                        <View style={archiveStyles.avatar}>
                            {avatar ? <Image source={{ uri: avatar.path }} style={archiveStyles.avatarImage}/> :
                    <View style={[commonStyles.flex1, commonStyles.centerVH]}>
                                    <MyIcon name='icon-addpicture' size={30} color='#C3C2C2'/>
                                    <MyText style={{
                        backgroundColor: 'transparent',
                        marginTop: 5,
                        color: '#666666',
                        fontSize: 14
                    }}>添加档案图片</MyText>
                                </View>}

                        </View>
                    </TouchableOpacity>
                    <View style={archiveStyles.headerBottom}/>
                </View>);
            }
        };
        this.state = {
            bgImage: null,
            opacity: new Animated.Value(0),
            avatar: null,
            skills: props.userInfo.skill || [],
            hobbies: props.userInfo.hobby || [],
            duty: props.userInfo.duty || '',
            introduce: props.userInfo.introduce || '',
            website: props.userInfo.website || '',
        };
    }
    onScroll(e) {
        Animated.timing(this.state.opacity, {
            toValue: e.nativeEvent.contentOffset.y
        }).start();
    }
    ;
    render() {
        const inputItemProps = {
            placeholder: '关于我（140个字符)',
            multiline: true,
            clear: true,
            numberOfLines: 0,
            maxLength: 140,
            styles: StyleSheet.create(newStyle),
            style: { height: autoSize(140), backgroundColor: '#fff' },
            onChange: (e) => { }
        };
        return (<View style={[commonStyles.container, archiveStyles.container]}>
                <StatusBar barStyle='light-content'/>
                <Animated.View style={[archiveStyles.navBar, {
                backgroundColor: this.state.opacity.interpolate({
                    inputRange: [0, 50],
                    outputRange: ['rgba(35,39,40,0)', 'rgba(35,39,40,1)'],
                    extrapolate: 'clamp'
                })
            }]}>

                    {this.props.createdType === 'edit' ?
            <TouchableOpacity style={archiveStyles.back} onPress={Actions.pop}>
                            <MyIcon name={'icon-common-fanhui-copy'} color={Colors.White} size={20}/>
                        </TouchableOpacity> : null}
                    <MyText style={archiveStyles.navBarTitle}>{this.props.createdType === 'new' ? '创建档案' : '编辑档案'}</MyText>
                    <TouchableOpacity style={archiveStyles.nextStep} onPress={this.props.createdType === 'new' ? Actions.areaPick : this.onSummit}>
                        {this.props.createdType === 'new' ? <MyText style={archiveStyles.navBarTitle}>下一步</MyText> :
            <MyIcon name={'icon-gou'} color={Colors.White}/>}
                    </TouchableOpacity>
                </Animated.View>

                <KeyboardAvoidingView behavior='position' keyboardVerticalOffset={-100}>
                    <ScrollView keyboardDismissMode='on-drag' onScroll={this.onScroll.bind(this)} scrollEventThrottle={20}>
                        <List renderHeader={this.renderListHeader}>
                            <WhiteSpace color='#F4F4F4'/>
                            <List.Item>{this.props.auth.userInfo.nickName}</List.Item>
                            <InputItem placeholder='职务' defaultValue={this.state.duty} onChange={duty => this.setState({ duty })}/>
                            <InputItem placeholder='网站' defaultValue={this.state.website} onChange={website => this.setState({ website })}/>
                            <WhiteSpace color='#F4F4F4'/>
                            <InputItem {...inputItemProps} defaultValue={this.state.introduce} onChange={introduce => this.setState({ introduce })}/>
                            
                            
                            
                            

                            

                            
                            
                            


                            <WhiteSpace color='#F4F4F4'/>
                            <List.Item arrow='horizontal' extra={`${this.state.skills.length}个技能`} onClick={Actions.addHobbyOrSkill.bind(this, {
            title: 'Skills',
            data: this.state.skills,
            callBack: (skills) => this.setState({ skills })
        })}>添加技能</List.Item>
                            <List.Item arrow='horizontal' extra={`${this.state.hobbies.length}个兴趣`} onClick={Actions.addHobbyOrSkill.bind(this, {
            title: 'Hobbies',
            data: this.state.hobbies,
            callBack: (hobbies) => this.setState({ hobbies })
        })}>添加兴趣</List.Item>
                        </List>
                    </ScrollView>
                </KeyboardAvoidingView>
            </View>);
    }
}
CreateArchivesPage.defaultProps = {
    createdType: 'new',
    userInfo: null
};
export default connect(({ auth }) => ({ auth }))(CreateArchivesPage);
